<template>
  <div class="num-layout">
    <div class="right box-border">
      <div class="one">
        <p class="large">
          {{ bzjhcl ? bzjhcl : '/' }}
        </p>
        <p class="text">本周计划产量</p>
      </div>
    </div>
    <div class="right box-border">
      <div class="three">
        <p class="large">{{ bzsjcl ? bzsjcl : '/' }}</p>
        <p class="text">本周实际产量</p>
      </div>
    </div>

    <div class="right box-border" style="margin-right: 0;">
      <div class="two">
        <p class="large">
          {{ bzdcl ? bzdcl + '%' : '/' }}
        </p>
        <p class="text">本周达成率</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Num',
  data() {
    return {
      bzdcl: 0,
      bzjhcl: 0,
      bzsjcl: 0,
      daybf: 0,
    }
  },
  props: {
    dataV: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  watch: {
    dataV: {
      handler(val) {

        this.bzjhcl =
          (val &&
            val.length > 0 &&
            val.filter((item) => item.title == '本周计划产量')[0].qty) ||
          0
        this.bzsjcl =
          (val &&
            val.length > 0 &&
            val.filter((item) => item.title == '本周实际产量')[0].qty) ||
          0
        this.bzdcl =
          (val &&
            val.length > 0 &&
            val.filter((item) => item.title == '本周达成率')[0].qty) ||
          0

        // this.bzdcl =
        //   Number(this.bzjhcl) - Number(this.bzsjcl) - Number(this.daybf)
      },
      deep: true,
    },
  },
  mounted() {
    console.log('this.dataV', this.dataV)
  },
}
</script>

<style lang="less" scoped>
.one {
  color: #01c0ff;
}
.two {
  color: #ffa421;
}
.three {
  color: #39fb9e;
}
.four {
  color: #fa563b;
}
.num-layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  .right {
    width: 50%;
    height: 16vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    .large {
      flex: 1;
      .px2font(30);
      // color: #68d8fe;
      /* color: #2de3f9; */
      margin-bottom: 2px;
    }

    .text {
      flex: 1;
      // color: #ccc;
      .px2font(14);
    }
  }
}
</style>
